<!-- 选择市场 -->
<!-- 左侧移动 <div class="el-icon-caret-left" ></div>  <div class="arrow-left" />-->
<!-- 右侧移动 <div class="arrow-right" /> <div class="el-icon-caret-right"></div>-->
<template>
  <div class="search-bar">
    <div class="btn-list" id="nav">
      <!-- 市场选择项 -->
      <div v-for="item,index in categoryList" :key="index" class="btn-item" 
           :class="isStyle==index?'pressDown':''"
           @click="getCurrentMarket(item,index)" ref="currentmarket" v-clickDown="index">
        {{ item.market.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    // 
    routerIndex: {
      type: Number,
      default: 0
    },
    // 市场选择项
    categoryList: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      isStyle:0,  // 市场项 - 点击样式切换
    }
  },
  watch: {},
  mounted () {    
    this.scrollInit(); // 市场项横向滚动条滚动
  },
  directives: {
    // 自动触发事件
      clickDown: {
          inserted(el,binding,index) {
              if(binding.value===0){
                  el.click()
              }
          }
      }
  },
  methods: {
    // 点击市场项
    getCurrentMarket(item,index){
      // 将当前的id传递给父组件
      this.$emit('categoryBar',item.market.marketId)
      // console.log('市场项列表的当前市场id',item.market.marketId);
      this.isStyle=index  // 点击后样式
    },

    // 市场项-滚动条滚轮横向移动
    scrollInit() { 
      const nav = document.getElementById("nav") 
      // 添加滚轮滚动监听事件
      nav.addEventListener('mousewheel', handler, false) //火狐浏览器写法 document.addEventListener('DOMMouseScroll', handler, false)
      function handler(event) {
        // 获取滚动方向
        const detail = event.wheelDelta || event.detail;
        const moveForwardStep = 1;         // 定义滚动方向
        const moveBackStep = -1;
        let step = 0;                      // 定义滚动距离
        // 判断滚动方向,数字为滚动幅度
        if (detail < 0) {
          step = moveForwardStep * 200;
        } else {
          step = moveBackStep * 100;
        }
        nav.scrollLeft += step; // 对需要滚动的元素进行滚动操作
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";

.search-bar {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;

  /* 行列表 */
  .btn-list {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow-x: scroll ;
    overflow-y: hidden ;
    /* background: rgb(158, 99, 99); */

    /* 市场每一项 */
    .btn-item {
      white-space: nowrap;
      padding: 0 20px;
      margin-right: 5px;
      font-size: 16px;
      border: 1px solid #59a1e8;
      background-color: transparent;
      color: #59a1e8;
      text-align: center;
      line-height: 40px;
      cursor: pointer;

      &:hover {
        background-color: #329eef;
        color: #fff;
      }
    }
    /* 市场每一项-点击后样式 */
    .pressDown{
        background-color: #329eef;
        color: #fff;
    }
    /* 左侧移动箭头 */
    .el-icon-caret-left{
      position: absolute;
      font-size: 40px;
      color:#0480fb ;  
    }
    /* 右侧移动箭头 */
    .el-icon-caret-right{
      position: absolute;
      font-size: 40px;
      right: 0px;
      color:#0480fb ; 
    }
    /* 左侧移动箭头 */
    /* .arrow-left {
      position: relative;
      width: 30px;
      height: 80%;
      background-color: rgba(4, 128, 251, 0.3);
      margin-right: 5px;

      &::before {
        content: "";
        position: absolute;
        top: 0px;
        left: -14px;
        width: 0px;
        height: 0px;
        border: 20px solid transparent;
        border-right: 10px solid #0480fb;
      }
    } */

    /* 右侧移动箭头 */
    /* .arrow-right {
      position: absolute;
      right: 0;
      width: 20px;
      height: 80%;
      background-color: rgba(4, 128, 251, 0.3);

      &::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 5px;
        width: 0px;
        height: 0px;
        border: 20px solid transparent;
        border-left: 10px solid #0480fb;
      }
    } */
  }
}
</style>
